<div class="row" id="app">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title" style="padding-block: 10px">{{message}}</h3>


                <!--                    <div class="input-group input-group-sm" style="width: 100px;">-->
                <!--                        <div class="input-group-btn">-->
                <!--                            <button type="button" class="btn btn-default btn-add">添加</button>-->
                <!--                            <button type="button" class="btn btn-default btn-update">修改</button>-->
                <!--                            -->
                <!--                        </div>-->


                <!--                        <div>-->
                <!--                            <table class="table">-->
                <!--                                <thead>-->
                <!--                                 <tr>-->
                <!--                                    <th>序号</th>-->
                <!--                                    <th>姓名</th>-->
                <!--                                    <th>邮箱</th>-->
                <!--                                    <th>角色</th>-->
                <!--                                    <th>产品类别</th>-->
                <!--                                    <th>手机号码</th>-->
                <!--                                    <th>毕业院校</th>-->
                <!--                                    <th>学历</th>-->
                <!--                                    <th>备注</th>-->
                <!--                                 </tr>-->

                <!--                                </thead>-->
                <!--                            </table>-->
                <!--                            <tbody>-->
                <!--                            -->
                <!--                            </tbody>-->
                <!--                           -->
                <!--                        </div>-->
                <!--                    </div>-->

                <div>
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="username">Name</label>
                            <input type="text" class="form-control" id="username" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                            <label for="type">Name</label>
                            <input type="text" class="form-control" id="type" placeholder="请输入产品类别">
                        </div>
                        <button type="button" class="btn btn-info">
                            <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>搜索
                        </button>

                        <button type="button" class="btn btn-warning">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>重置
                        </button>

                        <button type="button" class="btn btn-info" style="float: right">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                        </button>
                        <button type="button" class="btn btn-warning" style="float: right">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body table-responsive no-padding">
            <table id="gridTreeTable" class="table table-hover">
                <thead>
                <tr>
                    <!--                        <th data-field="selectItem" data-checkbox="true"></th>-->
                    <th>序号</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>角色</th>
                    <th>产品类别</th>
                    <th>手机号码</th>
                    <th>毕业院校</th>
                    <th>学历</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(n,i) in student" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{n.name}}</td>
                    <td>{{n.email}}</td>
                    <td>{{n.user}}</td>
                    <td>{{n.phone}}</td>
                    <td>{{n.academy}}</td>
                    <td>{{n.education}}</td>
                    <td>{{n.remark}}</td>
                    <!--                        <td><button class="btn btn-success" @click="doFindById(n)" style="color: blue">修改</button>-->
                    <!--                            <button class="btn btn-danger" @click="deleteById(n.id)">删除</button>-->
                    <!--                        </td>-->
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- /.box -->
</div>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"学生管理",
            student:[],
        },
        methods:{
            doGetNotices(){
                let url="/api/student/";
                axios.get(url,{
                    params:{

                    }
                }).then(function (response) {
                    let jasonResult = response.date;
                    this.student = jasonResult.date;
                })
            }
        },
        "/api":{

            target: 'http://localhost',

            changeOrigin: true,

            pathRewrite:{

                '^/api':'/'

            }

        },
        mounted(){
            this.doGetNotices();
        }
    })
</script>
